<template>
  <div class="text-center text-[28px] mb-4 font-bold">Log in</div>

    <div class="px-6 pb-1.5 text-[15px]">Email address</div>
    <div class="px-6 pb-2">
        <TextInput 
          placeholder="Email address"
          v-model:input="email"
          inputType="email"
          :autoFocus="true"
          :error="errors && errors.email ? errors.email[0] : ''"
        />
    </div>

    <div class="px-6 pb-2">
        <TextInput 
          placeholder="Password"
          v-model:input="password"
          inputType="password"
        />
    </div>
    <div class="px-6 text-[12px] text-gray-600">Forgot password?</div>

    <div class="px-6 pb-2 mt-6">
        <!-- :disabled="(!email || !password)"
        :class="(!email || !password) ? 'bg-gray-200' : 'bg-[#F02C56]'" -->
      <button 
        @click="login()" 
        class="w-full text-[17px] font-semibold text-white py-3 rounded-sm bg-[#F02C56]"
      >
        Log in
      </button>
    </div>
</template>
<script setup>
const { $generalStore, $userStore } = useNuxtApp()
let email = ref(null)
let password = ref(null)
let errors = ref(null)
let datas = ref(null)
let tokenCook = useCookie('token')
const login = async () => {
    errors.value = null
    console.log(123)
    try {
    //   const response = await fetch('http://localhost:3030/api/page');
    // datas.value = await response.json();
      datas.value = await $userStore.loginFun(email.value, password.value)
      tokenCook.value = datas.value.data.token
      console.log(datas.value, '---')
      // const xx = await $userStore.getUserInfo(1001)
      // console.log(xx)
      // $userStore.name = 2
    } catch(error){
      console.log(error)
    }
}
</script>
<style scoped>

</style>